<template>
  <div>
    <h1>组合api</h1>
    <h2>reactive 引用类型响应式数据</h2>
    <p v-for="item in list" :key="item">{{ item }}</p>

    <h2>ref 响应式数据</h2>
    <button @click="count++">{{ count }}</button>
    <button @click="setCount(5)">{{ count }}</button>
  </div>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
  setup() {
    // 组合式api，可以替换选项api，和选项api并用
    // console.log('beforeCreate create生命周期')
    // 定义一个响应式对象,默认值为0
    const count = ref(0)

    // 定义设置count的方法
    // js中设置count的值添加value属性
    function setCount(n) {
      count.value += n
    }
    // 定义一个引用类型响应式数据 默认值是一个数组
    const list = reactive(['vue', 'react', 'angular'])

    // 导出响应式对象
    return { count, setCount, list }
  }
}
</script>
